<template>
  <div class="columns is-multiline is-mobile">
    <div class="column">
      <base-card 
        :title="this.$t('message.titleOfProject')"
        :content="this.$t('message.contentOfProject')">
        <a class="card-footer-item" slot="footer"  @click="addArticle">
          <span>
            {{$t("message.addArticle")}}
          </span>
        </a>
      </base-card>
    </div>
    <div class="column" v-for="item in items" v-if="item.name">
      <base-card 
        :title="item.name" 
        :content="getDescription(item)">
        <a class="card-footer-item" slot="footer"  @click="articleInfo(item.articleId),openModalCard()">
          <span>
            {{$t("message.detailedInformation")}}
          </span>
        </a>
        <a class="card-footer-item" slot="footer"  @click="removeArticle(item.articleId)">
          <span>
            {{$t("message.remove")}}
          </span>
        </a>
        <a class="card-footer-item" slot="footer" @click="article(item.articleId)">
          <span>
            {{$t("message.manager")}}
          </span>
        </a>
      </base-card>
    </div>
    <modal :visible="showModal" @close="closeModalBasic"></modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { BaseCard, CardFooterItem } from 'vue-bulma-card'
import Modal from './modals/Modal'
import CardModals from './modals/CardModal'
import _ from 'lodash'
import Message from 'vue-bulma-message'
const MessageComponent = Vue.extend(Message)
const openMessage = (propsData = {
  title: '',
  message: '',
  type: '',
  direction: '',
  duration: 1000,
  container: '.messages'
}) => {
  return new MessageComponent({
    el: document.createElement('div'),
    propsData
  })
}
const CardModalComponent = Vue.extend(CardModals)

const openCardModal = (propsData = {
  visible: true
}) => {
  return new CardModalComponent({
    el: document.createElement('div'),
    propsData
  })
}

export default {
  components: {
    BaseCard,
    CardFooterItem,
    Modal
  },
  data () {
    return {
      showModal: false,
      cardModal: null,
      info: {}
    }
  },
  computed: {
    ...mapGetters({
      items: 'projects'
    })
  },
  methods: {
    articleInfo (e) {
      this.$data.info = _.filter(this.items, o => {
        return o.articleId === e
      })[0]
    },
    removeArticle (e) {
      const playload = {
        userId: this.$store.state.app.personal.user.userId,
        articleId: e
      }
      this.$store.dispatch('removeArticle', playload).then(() => {
        openMessage({
          message: '删除成功',
          type: 'success',
          duration: 1000,
          showCloseButton: true
        })
      })
    },
    article (e) {
      this.$data.info = _.filter(this.items, o => {
        return o.articleId === e
      })[0]
      this.$router.push({path: '/product/article', query: { article: this.$data.info }})
      window.sessionStorage.setItem('personal.projects.article', JSON.stringify(this.$data.info))
    },
    addArticle () {
      this.$router.push('/product/add/article')
    },
    closeModalBasic () {
      this.showModal = false
    },
    openModalCard () {
      const cardModal = this.cardModal || (this.cardModal = openCardModal({
        title: 'Article',
        info: {},
        url: this.$store.state.pkg.homepage
      }))
      cardModal._props.info = this.$data.info
      cardModal.$children[0].active()
    },
    getDescription (item) {
      return item.description
    }
  }
}
</script>
